 
	var yfields = new Array() ;
	var chart_yfield = new Array() ;
	var chart_yfields ;
	var chart_field = new Array() ;

	var bar_years = [
		['ALL'],
        	['2010'],
		['2011'],
		['2012'],
		['2013'],
		['2014'],
		['2015']
    	];

	var bar_months = [
		['ALL'],
               	['Jan'], 
		['Feb'], 
		['Mar'], 
		['Apr'], 
		['May'], 
		['Jun'], 
		['Jul'], 
		['Aug'], 
		['Sep'], 
		['Oct'], 
		['Nov'], 
		['Dec']
    	];


	var bar_yearStore = Ext.create('Ext.data.ArrayStore', {
        	fields: [
           		{name: 'year'} 
		],
        	data: bar_years
    	});
	
	var bar_monthStore = Ext.create('Ext.data.ArrayStore', {
        	fields: [
           		{name: 'month'} 
		],
        	data: bar_months
    	});

	var bar_appStore = Ext.create('Ext.data.JsonStore',{
    		autoDestroy: true,
    		proxy: {
	  		type: 'ajax',
        		url: 'data.php',
        		reader: {
    				type: 'json',
    				root: 'data'
        			}
    			},
    		fields: ['value','label']
	});

	var bar_fieldStore = Ext.create('Ext.data.JsonStore',{
    		autoDestroy: true,
    		proxy: {
	  		type: 'ajax',
        		url: 'data.php',
        		reader: {
    				type: 'json',
    				root: 'data'
        			}
    			},
    		fields: ['value','label']
	});

	Ext.define('bar_chart_model',{
		extend: 'Ext.data.Model',
		fields: ['name','occ' ]
	}); 

	var bar_chartStore = Ext.create('Ext.data.Store', {
		model: 'bar_chart_model',
		autoLoad: true,
		autoSync:true,
	 
		proxy: {
			type: 'ajax',
			url: 'bar_chart_xml.php',
			reader: {
				type: 'xml',
				record: 'values',
			}
		}
	});

	Ext.define('chart_fields',{
		extend: 'Ext.data.Model',
		fields: ['values']
	}); 
	
	var bar_chartFieldStore = Ext.create('Ext.data.Store', {
		model: 'chart_fields',
		autoLoad: true,
		autoSync:true,
		proxy: {
			type: 'ajax',
			url: 'chart_fields.php',
			reader: {
				type: 'xml',
				record: 'field',
			}
		}
	});

	var bar_yearCmb = Ext.create('Ext.form.ComboBox',{ 
		store: bar_yearStore,
		valueField: 'year',
		labelStyle:'padding-left:0px', 
		labelWidth: 65,
		displayField: 'year',
		triggerAction: 'all',
		mode: 'local',
		emptyText: 'Select a year',
		fieldLabel: 'Year'
	});

	var bar_monthCmb = Ext.create('Ext.form.ComboBox',{ 
		store: bar_monthStore,
		valueField: 'month',
		labelStyle:'padding-left:10px', 
		labelWidth: 65,
		displayField: 'month',
		triggerAction: 'all',
		mode: 'local',
		emptyText: 'Select a month',
		fieldLabel: 'Month'
	});
		
	var bar_appCmb = Ext.create('Ext.form.ComboBox',{
		store: bar_appStore,
		id: 'app',
		valueField: 'value',
		labelStyle:'padding-left:0px', 
		labelWidth: 65,
		displayField: 'label',
		triggerAction: 'all',
		emptyText: 'Select an application',
		fieldLabel: 'Application',
		listeners:{
 			'select': function( ) {
				bar_fieldCmb.enable();
				bar_fieldCmb.clearValue();
				//alert ( appCmb.getValue( ) );
				//fieldStore.load({params:{id: appCmb.getValue()}});
				bar_fieldStore.proxy.url = 'data.php?id='+bar_appCmb.getValue();
				bar_fieldStore.load();
			}
		}
	 });

	var bar_fieldCmb = Ext.create('Ext.form.ComboBox',{ 
		store: bar_fieldStore,
		disabled: true,
		id: 'field',
		valueField: 'value',
		labelStyle:'padding-left:10px', 
		labelWidth: 65,
		displayField: 'label',
		triggerAction: 'all',
		mode: 'local',
		emptyText: 'Select an application first',
		fieldLabel: 'Field',
		listeners:{
         	'select': function( ) {			  	

				bar_chartFieldStore.proxy.url = 'chart_fields.php?app='+bar_appCmb.getRawValue( )+'&field='+bar_fieldCmb.getRawValue( );
				bar_chartFieldStore.load();	

			}
		}
	});
                 
	var bar_details = Ext.create('Ext.form.Panel', {
		height : 140,
		width   : 520,
		bodyStyle: "padding-left: 40px;",
	 	border: false,
	 	defaults: {
  	 		border: false
	 	},
		items:[{
			xtype: 'fieldset',
			height: 100,
			title: 'Bar Chart Details',
			collapsible: true,
			defaults: {
				labelWidth: 89,
				anchor: '100%',
				layout: {
		        		type: 'hbox',
		        		defaultMargins: {top: 0, right: 3, bottom: 0, left: 0}
	 			}
			},
			items: [
			{
				xtype: 'fieldcontainer',
				combineErrors: false,
				items: [bar_yearCmb, bar_monthCmb]
			},{
				xtype: 'fieldcontainer',
				combineErrors: false,
				items: [bar_appCmb, bar_fieldCmb]					
			}]
		}],
		buttons: [
    		{ 
        		text   : 'Submit',
        		handler: function() {

				//chart_yfield = [];
 				//chart_field = [];
				var fields = new Array() ;

				var chart_fields ;


				bar_chartFieldStore.each(function(rec) {
					chart_fields = "day|"+rec.get('values');
					chart_yfields = rec.get('values');
							
				});
				fields = chart_fields.split('|');
				for (var i = 0; i < fields.length; i++) {
					chart_field[i] =  {
					    name: fields[i]
					};

				}
				yfields = chart_yfields.split('|');
				for (var i = 0; i < yfields.length; i++) {
					chart_yfield[i] =   
	 yfields[i]
					 ;

				}
				var Newchart = Ext.define('Newchart',{
					extend: 'Ext.data.Model',
					fields: chart_field
				}); 
				bar_chartStore.proxy.setModel( Newchart, true );
				bar_chartStore.proxy.url = 'bar_chart_xml.php?app='+bar_appCmb.getRawValue( )+'&year='+bar_yearCmb.getRawValue( )+'&month='+bar_monthCmb.getRawValue( )+'&field='+bar_fieldCmb.getRawValue( )+'&correlator=off';
				bar_chartStore.load();

 
			    	var chart = Ext.getCmp('bar_chart');
			    	var axis = chart.axes.get(0);
			 
			    	axis.fields = chart_yfield;
			    	bar_chart.redraw();

        		}
    		}]
	});

	var bar_chart = Ext.create('Ext.chart.Chart',{
		height : 500,
		width   : 500,
		animate: true,
		minHeight: 400,
		minWidth: 550,
		hidden: false,
		id : 'bar_chart', 
		maximizable: true,       
	    	style: 'background:#fff',
	    	animate: true,
	    	shadow: true,
	    	store: bar_chartStore,
    		legend: {
			position: 'right'  
    		},
    		axes: [{
	        	type: 'Numeric',
       	 		position: 'bottom',
	        	fields: chart_yfield,
	        	minimum: 0,
	        	label: {
            			renderer: Ext.util.Format.numberRenderer('0,0')
	        	},
	        	grid: true,
	        	title: 'Number of occurence'
    		}, {
	        	type: 'Category',
	        	position: 'left',
	        	fields: 'day',
	        	title: 'month '+bar_monthCmb.getRawValue( )+''
   	 	}],
		series: [{
	        	type: 'bar',
	        	axis: 'bottom',
	        	xField: 'day',
	        	yField: chart_yfield
    		}]
	});
 

	var bar_chart_panel = Ext.create('widget.panel', {
	        autoHeight: true,
		width   : 580,
		bodyPadding: 10,
		height: 650,
		//renderTo: Ext.getBody(),
                layout: 'fit',
	 	border: false,
	 	defaults: {
  	 		border: false
	 	},
		items: {
			xtype: 'container',  
	                layout: 'vbox',
	        	items: [ bar_details , bar_chart  ]
		}
			 
	});

 

 

